//高炉首页
<template>
    <div>
      <mt-cell title="高炉当前总体情况"></mt-cell>
      <div class="total">
            <div>
                <div class="time font-size-12">
                    {{time}}
                </div>
                <div class="score">
                  <div>
                    {{score}}
                  </div>
                  <div>
                      <mt-button size="small" type="primary">查看</mt-button>
                  </div>
                </div>
                <div class="averageScore font-size-12">
                  昨日平均得分:{{averageScore}}
                </div>
                <div class="compare font-size-12">
                  日环比:<i class="fa fa-caret-down" aria-hidden="true"></i>{{compare}} %
                </div>
            </div>
            <div>
              <div class="radar" id="radar"></div>
            </div>
      </div>
      <mt-cell title="高炉各分项炉况"></mt-cell>
      <div id="line" class="line">

      </div>
      <div>
        <table class="table">
          <thead>
            <tr>
              <th></th>
              <th>燃料比</th>
              <th>煤比</th>
              <th>风量</th>
              <th>煤气利用率</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>当天值</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>天平均</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
          </tbody>
        </table>
      </div>
    </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "furnaceHome",
  data() {
    return {
      time: "2018-08-27",
      score: "97",
      averageScore: "93",
      compare: "11"
    };
  },
  mounted() {
    this.$nextTick(function() {
      const radarDom = document.getElementById("radar");
      const chart = echarts.init(radarDom);
      const option = {
        tooltip: {},
        radar: {
          // radius:"50%",
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          nameGap: 0,
          indicator: [
            { name: "原料", max: 6500 },
            { name: "气流", max: 16000 },
            { name: "炉缸", max: 30000 },
            { name: "出铁", max: 38000 }
          ]
        },
        series: [
          {
            name: "值",
            type: "radar",
            data: [
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: "值"
              }
            ]
          }
        ]
      };

      chart.setOption(option);
      // [
      //   "#c23531",
      //   "#2f4554",
      //   "#61a0a8",
      //   "#d48265",
      //   "#91c7ae",
      //   "#749f83",
      //   "#ca8622",
      //   "#bda29a",
      //   "#6e7074",
      //   "#546570",
      //   "#c4ccd3"
      // ];
      const lineDom = document.getElementById("line");
      const lineChart = echarts.init(lineDom);
      const lineOption = {
        legend: {
          data: [
            {
              name: "高炉得分",
              textStyle: {
                color: "#c23531"
              }
            },
            {
              name: "原料",
              textStyle: {
                color: "#2f4554"
              }
            },
            {
              name: "气流分布",
              textStyle: {
                color: "#61a0a8"
              }
            },
            {
              name: "炉缸",
              textStyle: {
                color: "#d48265"
              }
            },
            {
              name: "出铁",
              textStyle: {
                color: "#749f83"
              }
            }
          ],
          right: 0,
          top: "middle",
          orient: "vertical",
          align: "right",
          icon: "none"
        },
        grid: {
          top: "5%",
          left: "2%",
          right: "20%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2018.09.01", "2018.09.02", "2018.09.03", "2018.09.04"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "高炉得分",
            type: "line",
            smooth: true,
            stack: "总量",
            data: [120, 132, 101, 134]
          },
          {
            name: "原料",
            type: "line",
            smooth: true,
            stack: "总量",
            data: [220, 182, 191, 234]
          },
          {
            name: "气流分布",
            type: "line",
            smooth: true,
            stack: "总量",
            data: [150, 232, 201, 154]
          },
          {
            name: "炉缸",
            type: "line",
            smooth: true,
            stack: "总量",
            data: [320, 332, 301, 334]
          },
          {
            name: "出铁",
            type: "line",
            smooth: true,
            stack: "总量",
            data: [820, 932, 901, 934]
          }
        ]
      };

      lineChart.setOption(lineOption);
    });
  }
};
</script>

<style lang="scss" scoped>
.font-size-12 {
  font-size: 12px;
}
.total {
  display: flex;
  div:nth-child(1) {
    flex: 2;
  }
  div:nth-child(2) {
    flex: 3;
  }
  .radar {
    height: 130px;
  }
}
.mint-button--small {
  height: 24px;
}
.fa-caret-down {
  color: red;
}
.score {
  display: flex;
  align-items: center;
  // height: 150px;

  div:nth-child(1) {
    font-size: 48px;
    font-weight: 900;
    flex: 2;
  }
  div:nth-child(2) {
    flex: 3;
  }
}
.line {
  height: 160px;
}
</style>
